"use client"

import { useState } from "react"
import { Calendar, Clock, Edit, Plus, Trash2, Users } from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { cn } from "@/lib/utils"
import { format } from "date-fns"
import { Calendar as CalendarComponent } from "@/components/ui/calendar"

// 修改模拟课表数据为大学课程
const scheduleData = {
  monday: [
    { id: 1, subject: "高等数学", class: "计算机科学1班", teacher: "王教授", time: "08:00-09:40", room: "理科楼A101" },
    { id: 2, subject: "大学英语", class: "电子工程2班", teacher: "李教授", time: "10:00-11:40", room: "外语楼B102" },
    {
      id: 3,
      subject: "程序设计基础",
      class: "软件工程1班",
      teacher: "张教授",
      time: "13:30-15:10",
      room: "信息楼C103",
    },
    { id: 4, subject: "数据结构", class: "计算机科学2班", teacher: "刘教授", time: "15:30-17:10", room: "信息楼C104" },
    { id: 5, subject: "线性代数", class: "人工智能1班", teacher: "陈教授", time: "18:30-20:10", room: "理科楼A105" },
  ],
  tuesday: [
    { id: 7, subject: "大学物理", class: "电子工程1班", teacher: "张教授", time: "08:00-09:40", room: "理科楼B103" },
    { id: 8, subject: "高等数学", class: "软件工程2班", teacher: "王教授", time: "10:00-11:40", room: "理科楼A101" },
    {
      id: 9,
      subject: "计算机网络",
      class: "计算机科学1班",
      teacher: "李教授",
      time: "13:30-15:10",
      room: "信息楼C102",
    },
    { id: 10, subject: "操作系统", class: "软件工程1班", teacher: "刘教授", time: "15:30-17:10", room: "信息楼C104" },
    {
      id: 11,
      subject: "人工智能导论",
      class: "人工智能1班",
      teacher: "周教授",
      time: "18:30-20:10",
      room: "信息楼C107",
    },
  ],
  wednesday: [
    {
      id: 13,
      subject: "数据库原理",
      class: "计算机科学1班",
      teacher: "李教授",
      time: "08:00-09:40",
      room: "信息楼C102",
    },
    { id: 14, subject: "高等数学", class: "电子工程2班", teacher: "王教授", time: "10:00-11:40", room: "理科楼A101" },
    { id: 15, subject: "电路分析", class: "电子工程1班", teacher: "刘教授", time: "13:30-15:10", room: "工科楼D104" },
    { id: 16, subject: "大学英语", class: "软件工程2班", teacher: "张教授", time: "15:30-17:10", room: "外语楼B103" },
    { id: 17, subject: "机器学习", class: "人工智能1班", teacher: "陈教授", time: "18:30-20:10", room: "信息楼C105" },
  ],
  thursday: [
    { id: 19, subject: "高等数学", class: "计算机科学1班", teacher: "王教授", time: "08:00-09:40", room: "理科楼A101" },
    { id: 20, subject: "软件工程", class: "软件工程2班", teacher: "李教授", time: "10:00-11:40", room: "信息楼C102" },
    { id: 21, subject: "大学英语", class: "电子工程2班", teacher: "张教授", time: "13:30-15:10", room: "外语楼B103" },
    { id: 22, subject: "体育", class: "计算机科学1班", teacher: "吴教授", time: "15:30-17:10", room: "体育馆" },
    { id: 23, subject: "数字电路", class: "电子工程1班", teacher: "刘教授", time: "18:30-20:10", room: "工科楼D104" },
  ],
  friday: [
    { id: 25, subject: "编译原理", class: "软件工程1班", teacher: "李教授", time: "08:00-09:40", room: "信息楼C102" },
    { id: 26, subject: "高等数学", class: "电子工程1班", teacher: "王教授", time: "10:00-11:40", room: "理科楼A101" },
    { id: 27, subject: "大学英语", class: "计算机科学1班", teacher: "张教授", time: "13:30-15:10", room: "外语楼B103" },
    {
      id: 28,
      subject: "计算机图形学",
      class: "计算机科学2班",
      teacher: "赵教授",
      time: "15:30-17:10",
      room: "信息楼C105",
    },
    { id: 29, subject: "深度学习", class: "人工智能1班", teacher: "陈教授", time: "18:30-20:10", room: "信息楼C107" },
  ],
}

// 课程颜色映射
const subjectColors: Record<string, string> = {
  高等数学: "bg-blue-100 text-blue-800 border-blue-300",
  大学英语: "bg-green-100 text-green-800 border-green-300",
  程序设计基础: "bg-purple-100 text-purple-800 border-purple-300",
  数据结构: "bg-yellow-100 text-yellow-800 border-yellow-300",
  计算机网络: "bg-orange-100 text-orange-800 border-orange-300",
  体育: "bg-red-100 text-red-800 border-red-300",
  人工智能导论: "bg-pink-100 text-pink-800 border-pink-300",
  机器学习: "bg-indigo-100 text-indigo-800 border-indigo-300",
}

export function ClassSchedule() {
  const [activeTab, setActiveTab] = useState("weekly")
  const [selectedClass, setSelectedClass] = useState("all")
  const [date, setDate] = useState<Date | undefined>(new Date())

  // 根据班级筛选课表
  const filterScheduleByClass = (schedule: typeof scheduleData) => {
    if (selectedClass === "all") return schedule

    const filtered: typeof scheduleData = {
      monday: [],
      tuesday: [],
      wednesday: [],
      thursday: [],
      friday: [],
    }

    Object.keys(schedule).forEach((day) => {
      filtered[day as keyof typeof schedule] = schedule[day as keyof typeof schedule].filter((item) =>
        item.class.includes(selectedClass),
      )
    })

    return filtered
  }

  const filteredSchedule = filterScheduleByClass(scheduleData)

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
            <div>
              <CardTitle>课表管理</CardTitle>
              <CardDescription>查看和管理所有班级的课程安排</CardDescription>
            </div>
            <div className="flex gap-2">
              <Select value={selectedClass} onValueChange={setSelectedClass}>
                <SelectTrigger className="w-[180px]">
                  <SelectValue placeholder="选择班级" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有班级</SelectItem>
                  <SelectItem value="计算机科学1班">计算机科学1班</SelectItem>
                  <SelectItem value="计算机科学2班">计算机科学2班</SelectItem>
                  <SelectItem value="软件工程1班">软件工程1班</SelectItem>
                  <SelectItem value="软件工程2班">软件工程2班</SelectItem>
                  <SelectItem value="电子工程1班">电子工程1班</SelectItem>
                  <SelectItem value="电子工程2班">电子工程2班</SelectItem>
                  <SelectItem value="人工智能1班">人工智能1班</SelectItem>
                </SelectContent>
              </Select>
              <Dialog>
                <DialogTrigger asChild>
                  <Button size="sm" className="gap-1">
                    <Plus className="h-4 w-4" />
                    添加课程
                  </Button>
                </DialogTrigger>
                <DialogContent>
                  <DialogHeader>
                    <DialogTitle>添加新课程</DialogTitle>
                    <DialogDescription>填写以下信息添加新的课程安排</DialogDescription>
                  </DialogHeader>
                  <div className="grid gap-4 py-4">
                    <div className="grid grid-cols-4 items-center gap-4">
                      <Label htmlFor="subject" className="text-right">
                        课程
                      </Label>
                      <Select defaultValue="高等数学">
                        <SelectTrigger id="subject" className="col-span-3">
                          <SelectValue placeholder="选择课程" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="高等数学">高等数学</SelectItem>
                          <SelectItem value="大学英语">大学英语</SelectItem>
                          <SelectItem value="程序设计基础">程序设计基础</SelectItem>
                          <SelectItem value="数据结构">数据结构</SelectItem>
                          <SelectItem value="计算机网络">计算机网络</SelectItem>
                          <SelectItem value="操作系统">操作系统</SelectItem>
                          <SelectItem value="数据库原理">数据库原理</SelectItem>
                          <SelectItem value="软件工程">软件工程</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="grid grid-cols-4 items-center gap-4">
                      <Label htmlFor="class" className="text-right">
                        班级
                      </Label>
                      <Select defaultValue="计算机科学1班">
                        <SelectTrigger id="class" className="col-span-3">
                          <SelectValue placeholder="选择班级" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="计算机科学1班">计算机科学1班</SelectItem>
                          <SelectItem value="计算机科学2班">计算机科学2班</SelectItem>
                          <SelectItem value="软件工程1班">软件工程1班</SelectItem>
                          <SelectItem value="软件工程2班">软件工程2班</SelectItem>
                          <SelectItem value="电子工程1班">电子工程1班</SelectItem>
                          <SelectItem value="电子工程2班">电子工程2班</SelectItem>
                          <SelectItem value="人工智能1班">人工智能1班</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="grid grid-cols-4 items-center gap-4">
                      <Label htmlFor="teacher" className="text-right">
                        教师
                      </Label>
                      <Select defaultValue="王教授">
                        <SelectTrigger id="teacher" className="col-span-3">
                          <SelectValue placeholder="选择教师" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="王教授">王教授</SelectItem>
                          <SelectItem value="李教授">李教授</SelectItem>
                          <SelectItem value="张教授">张教授</SelectItem>
                          <SelectItem value="刘教授">刘教授</SelectItem>
                          <SelectItem value="陈教授">陈教授</SelectItem>
                          <SelectItem value="周教授">周教授</SelectItem>
                          <SelectItem value="吴教授">吴教授</SelectItem>
                          <SelectItem value="赵教授">赵教授</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="grid grid-cols-4 items-center gap-4">
                      <Label htmlFor="day" className="text-right">
                        星期
                      </Label>
                      <Select defaultValue="monday">
                        <SelectTrigger id="day" className="col-span-3">
                          <SelectValue placeholder="选择星期" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="monday">星期一</SelectItem>
                          <SelectItem value="tuesday">星期二</SelectItem>
                          <SelectItem value="wednesday">星期三</SelectItem>
                          <SelectItem value="thursday">星期四</SelectItem>
                          <SelectItem value="friday">星期五</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="grid grid-cols-4 items-center gap-4">
                      <Label htmlFor="time" className="text-right">
                        时间
                      </Label>
                      <Select defaultValue="08:00-09:40">
                        <SelectTrigger id="time" className="col-span-3">
                          <SelectValue placeholder="选择时间" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="08:00-09:40">08:00-09:40</SelectItem>
                          <SelectItem value="10:00-11:40">10:00-11:40</SelectItem>
                          <SelectItem value="13:30-15:10">13:30-15:10</SelectItem>
                          <SelectItem value="15:30-17:10">15:30-17:10</SelectItem>
                          <SelectItem value="18:30-20:10">18:30-20:10</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="grid grid-cols-4 items-center gap-4">
                      <Label htmlFor="room" className="text-right">
                        教室
                      </Label>
                      <Input id="room" defaultValue="101" className="col-span-3" />
                    </div>
                  </div>
                  <DialogFooter>
                    <Button type="submit">保存</Button>
                  </DialogFooter>
                </DialogContent>
              </Dialog>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="weekly" onValueChange={setActiveTab}>
            <TabsList className="mb-4">
              <TabsTrigger value="weekly">周课表</TabsTrigger>
              <TabsTrigger value="daily">日课表</TabsTrigger>
              <TabsTrigger value="calendar">日历视图</TabsTrigger>
            </TabsList>

            <TabsContent value="weekly" className="space-y-4">
              <div className="grid grid-cols-5 gap-4">
                {Object.entries(filteredSchedule).map(([day, classes], index) => {
                  const dayNames = ["星期一", "星期二", "星期三", "星期四", "星期五"]
                  return (
                    <div key={day} className="space-y-4">
                      <div className="rounded-lg bg-muted p-2 text-center font-medium">{dayNames[index]}</div>
                      {classes.length > 0 ? (
                        classes.map((item) => (
                          <div
                            key={item.id}
                            className={`rounded-lg border p-3 ${subjectColors[item.subject] || "bg-gray-100"}`}
                          >
                            <div className="flex items-center justify-between">
                              <span className="font-medium">{item.subject}</span>
                              <div className="flex gap-1">
                                <Button variant="ghost" size="icon" className="h-6 w-6">
                                  <Edit className="h-3 w-3" />
                                </Button>
                                <Button variant="ghost" size="icon" className="h-6 w-6">
                                  <Trash2 className="h-3 w-3" />
                                </Button>
                              </div>
                            </div>
                            <div className="mt-2 text-xs">
                              <div className="flex items-center gap-1">
                                <Users className="h-3 w-3" />
                                <span>{item.class}</span>
                              </div>
                              <div className="flex items-center gap-1">
                                <Clock className="h-3 w-3" />
                                <span>{item.time}</span>
                              </div>
                              <div className="flex items-center justify-between">
                                <span>{item.teacher}</span>
                                <Badge variant="outline" className="text-[10px]">
                                  {item.room}
                                </Badge>
                              </div>
                            </div>
                          </div>
                        ))
                      ) : (
                        <div className="flex h-20 items-center justify-center rounded-lg border border-dashed">
                          <span className="text-sm text-muted-foreground">无课程安排</span>
                        </div>
                      )}
                    </div>
                  )
                })}
              </div>
            </TabsContent>

            <TabsContent value="daily" className="space-y-4">
              <div className="flex justify-center">
                <Popover>
                  <PopoverTrigger asChild>
                    <Button
                      variant={"outline"}
                      className={cn("w-[240px] justify-start text-left font-normal", !date && "text-muted-foreground")}
                    >
                      <Calendar className="mr-2 h-4 w-4" />
                      {date ? format(date, "PPP") : <span>选择日期</span>}
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-auto p-0" align="start">
                    <CalendarComponent mode="single" selected={date} onSelect={setDate} initialFocus />
                  </PopoverContent>
                </Popover>
              </div>

              <div className="space-y-4">
                <div className="rounded-lg bg-muted p-2 text-center font-medium">
                  {date ? format(date, "yyyy年MM月dd日") : "今日课程"}
                </div>
                <div className="space-y-4">
                  {filteredSchedule.monday.map((item) => (
                    <div
                      key={item.id}
                      className={`rounded-lg border p-3 ${subjectColors[item.subject] || "bg-gray-100"}`}
                    >
                      <div className="flex items-center justify-between">
                        <span className="font-medium">{item.subject}</span>
                        <Badge variant="outline">{item.time}</Badge>
                      </div>
                      <div className="mt-2 grid grid-cols-2 gap-2 text-sm">
                        <div className="flex items-center gap-1">
                          <Users className="h-4 w-4" />
                          <span>{item.class}</span>
                        </div>
                        <div className="flex items-center gap-1">
                          <span>教室: {item.room}</span>
                        </div>
                        <div className="flex items-center gap-1">
                          <span>教师: {item.teacher}</span>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </TabsContent>

            <TabsContent value="calendar" className="space-y-4">
              <div className="rounded-lg border p-4">
                <div className="mb-4 grid grid-cols-7 gap-4 text-center font-medium">
                  <div>星期一</div>
                  <div>星期二</div>
                  <div>星期三</div>
                  <div>星期四</div>
                  <div>星期五</div>
                  <div>星期六</div>
                  <div>星期日</div>
                </div>
                <div className="grid grid-cols-7 gap-4">
                  {Array.from({ length: 35 }).map((_, index) => {
                    const day = index % 7
                    const isWeekend = day === 5 || day === 6
                    return (
                      <div key={index} className={`min-h-24 rounded-lg border p-2 ${isWeekend ? "bg-gray-50" : ""}`}>
                        <div className="mb-1 text-right text-sm font-medium">{index + 1}</div>
                        {!isWeekend && day < 5 && index < 20 && (
                          <div className="space-y-1">
                            <div className="rounded bg-blue-100 px-1 py-0.5 text-xs text-blue-800">数学 08:00</div>
                            <div className="rounded bg-green-100 px-1 py-0.5 text-xs text-green-800">语文 10:00</div>
                          </div>
                        )}
                      </div>
                    )
                  })}
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}
